﻿/// <reference path="/Scripts/Helpers/Functions.js" />
/// <reference path="/Scripts/jquery-1.7.2.js" />
/// <reference path="/Scripts/jquery.mobile-1.1.0.js" />

// namespace Recuperer [Preparation]
var Recuperer = (function()
{
    var my = {},
    _getPalette = true,
    _nbMarchandise = 2,
    _marchandises,
    _currentMarchandise = 0,
    _currentStep = 0,
    _currentPosX = 0,
    _currentPosY = 0,
    _map,
    _context;

    my.init = function(searchPalette)
    {
        /// <summary>Initialise la récupération</summary>
        /// <param name="searchPalette" type="boolean">True si recherche d'une palette</param>

        _getPalette = searchPalette && true;

        if (_getPalette)
        {
            _marchandises = { "details": [
                                { "posX": 50, "posY": 100 }
                                ]
            };
        }
        else
        {
            _marchandises = { "details": [
                                { "posX": 50, "posY": 100 },
                                { "posX": 100, "posY": 40 }
                                ]
            };
        }

        initEvents();

        _map = document.getElementById("map2D_secteur");
        _context = _map.getContext("2d");

        displayMap();
        displayDestination();
        displayPosition(5, 5);
    };

    // INITIALISE LES EVENEMENTS DE LA PAGE
    function initEvents()
    {
        /// <summary>Initialise les évènements de la page</summary>

        // ÉVÈNEMENT : APPUI SUR LE BOUTON RETOUR
        $("#btn_retour").click(function()
        {
            switch (_currentStep)
            {
                case 0:
                    {
                        window.location = "/Accueil";
                        break;
                    }
                case 1:
                    {
                    }
                case 2:
                    {
                    }
                case 3:
                    {
                        _currentStep = 0;
                        $("#mapView").css("display", "block");
                        $("#scanView").css("display", "none");
                        break;
                    }
                case 4:
                    {
                        _currentStep--;
                        leadStep();
                        break;
                    }
            }
        });

        // ÉVÈNEMENT : APPUI SUR LE BOUTON SCANNER
        $("#btn_scanner").click(function()
        {
            _currentStep++;
            leadStep();
        });

        // ÉVÈNEMENT : APPUI SUR LE BOUTON POSITION
        $("#btn_go_position").click(function()
        {
            _currentStep = 1;
            leadStep();
        });

        // ÉVÈNEMENT : APPUI SUR LE BOUTON MARCHANDISE
        $("#btn_go_scanner").click(function()
        {
            _currentStep = 3;
            leadStep();
        });

        // ÉVÈNEMENT : APPUI SUR LE BOUTON OK
        $("#btn_ok").click(function()
        {
            window.location = "/Accueil";
        });
    }

    function leadStep()
    {
        switch (_currentStep)
        {
            case 1:
                {
                    // Affichage scan position
                    $("#icone_flashcode").css("display", "inline");
                    $("#title").text("Scannez un flashcode");
                    $("#icone_emplacement").css("display", "inline");
                    $("#icone_marchandise").css("display", "none");
                    break;
                }
            case 2:
                {
                    // Scan position
                    displayPosition(100, 50);
                    _currentStep = 0;
                    break;
                }
            case 3:
                {
                    // Affichage scan marchandise
                    $("#icone_flashcode").css("display", "none");
                    $("#title").text("Scannez une marchandise");
                    $("#icone_emplacement").css("display", "none");
                    $("#icone_marchandise").css("display", "inline");
                    break;
                }
            case 4:
                {
                    if (_getPalette)
                    {
                        // Scan marchandise: Affichage scan emplacement
                        $("#title").text("Scannez un emplacement");
                        $("#icone_emplacement").css("display", "inline");
                        $("#icone_marchandise").css("display", "none");
                    }
                    else
                    {
                        // Scan position
                        _currentMarchandise++;

                        if (_currentMarchandise >= _marchandises.details.length)
                        {
                            window.location = "/Preparation/Monter_Palette";
                        }
                        else
                        {
                            // Affichage de la prochaine marchandise
                            displayDestination();

                            // Mise à jour de la position utilisateur
                            var posX = _marchandises.details[_currentMarchandise - 1].posX;
                            var posY = _marchandises.details[_currentMarchandise - 1].posY - 5;
                            displayPosition(posX, posY);
                        }
                        _currentStep = 0;
                    }
                    break;
                }
            case 5:
                {
                    $("#title").text("Marchandise enregistrée");
                    $("#icone_ok").css("display", "inline");
                    $("#icone_emplacement").css("display", "none");
                    $("#btn_ok").css("display", "inline");
                    $("#btn_scanner").css("display", "none");
                    $("#btn_retour").css("visibility", "collapse");
                    $("#btn_go_position").css("visibility", "collapse");
                    $("#btn_go_scanner").css("visibility", "collapse");
                    break;
                }
        }

        if (_currentStep == 0)
        {
            $("#mapView").css("display", "block");
            $("#scanView").css("display", "none");
        }
        else
        {
            $("#mapView").css("display", "none");
            $("#scanView").css("display", "block");
        }
    }

    // INITIALISE LE PLAN 2D
    function displayMap()
    {
        /// <summary>Initialise le plan 2D</summary>

        _context.beginPath();
        _context.fillStyle = "Black";
        _context.fillRect(10, 10, 250, 20);
        _context.fillRect(10, 40, 250, 20);
        _context.fillRect(10, 70, 250, 20);
        _context.fillRect(10, 100, 250, 20);
        _context.closePath();
    }

    // AFFICHE LA POSITION DE LA MARCHANDISE A RECUPERER
    function displayDestination()
    {
        /// <summary>Affiche la position de la marchandise sur le plan</summary>

        if (_currentMarchandise > 0)
        {
            // Effacement de la marchandise précédante
            _context.clearRect(_marchandises.details[_currentMarchandise - 1].posX,
                                _marchandises.details[_currentMarchandise - 1].posY, 5, 5);
            displayMap();
        }
        var x = _marchandises.details[_currentMarchandise].posX;
        var y = _marchandises.details[_currentMarchandise].posY;

        _context.beginPath();
        _context.fillStyle = "Red";
        _context.fillRect(x, y, 5, 5);
        _context.closePath();
    }

    // AFFICHE LA POSITION DE L'UTILISATEUR SUR LE PLAN
    function displayPosition(x, y)
    {
        /// <summary>Affiche la position de l'utilisateur sur le plan</summary>
        /// <param name="x" type="integer">La position x</param>
        /// <param name="y" type="integer">La position y</param>

        _context.beginPath();
        _context.clearRect(_currentPosX, _currentPosY, 5, 5);

        _currentPosX = x;
        _currentPosY = y;

        _context.beginPath();
        _context.fillStyle = "White";
        _context.fillRect(x, y, 5, 5);
        _context.closePath();
    }

    return my;
} ());